import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, ImageBackground, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Toast} from '@ant-design/react-native';

import {getParkingDataInfo, getParkingPlanCarByItemID, judgeParkingState} from '~/api/parking';
import {saveParkingOrder} from '~/api/parking';
import {initParkOrder, saveParkOrder} from '~/store/parkorder';
import {connect} from 'react-redux';
import {saveSystem} from '~/store/system';
import {getParkingPlanInfo} from '~/api/parking';
import Parkpublics from '~/components/process/parkpublics';
import FootPrint from '~/components/footprint';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
        parkorder: state.parkorder,
    };
};

const mapSetter = (dispatch) => {
    return {
        onSave: (data) => {
            dispatch(saveParkOrder(data));
        },
        initParkOrder: () => {
            dispatch(initParkOrder());
        },
    };
};
class Confirm extends Component {
    static navigationOptions = {
        title: '确认购买车位',
        headerTransparent: true,
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            parkingid: this.props.parkorder.parkingid,
            parkingplanitem: this.props.parkorder.parkingplanitem,
            parkinglist: [],
            planID: this.props.parkorder.parkplanid,
            projectId: this.props.parkorder.projectId,
            CompanyBuildingID: this.props.parkorder.companybuildingid,
            parkstate: '',
            parkingplancar: [],
        };

        this.getparkinfo(this.state.parkingid);

        console.log(this.props.parkorder);
        if (this.props.parkorder.carstate > 0) {
            this.getparkcar();
        }
    }
    getparkinfo(parkingid) {
        getParkingDataInfo(parkingid).then((r) => {
            if (r.code === 0) {
                if (r.data.state != '可售') {
                    this.props.navigation.push('ChangePark');
                }
                this.setState({
                    parkinglist: r.data,
                    parkstate: r.data.state,
                });
                // Alert.alert('成功');
            } else {
                Alert.alert(r.msg);
            }
        });
    }
    getparkcar() {
        getParkingPlanCarByItemID(this.props.parkorder.parkingplanitemid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkingplancar: r.data,
                });
            } else {
                Toast.info(r.msg);
            }
        });
    }
    render() {
        const onpress = () => {
            judgeParkingState(this.state.parkingid).then((r) => {
                if (r.code === 0) {
                    saveParkingOrder({
                        ParkingDataID: this.state.parkingid,
                        ParkingPlanItemID: this.props.parkorder.parkingplanitemid,
                        OwnerHouseID: this.props.parkorder.ownerhouseid,
                        ParkingPackageID: this.props.parkorder.packageid,
                        PayMode: this.props.parkorder.payfull == 1 ? 1 : 2,
                    }).then((r) => {
                        if (r.code === 0) {
                            this.props.initParkOrder();
                            this.props.navigation.replace('Paymentmoney', {
                                orderid: r.data,
                            });
                        } else {
                            Toast.info(r.msg, 1);
                        }
                    });
                } else {
                    Toast.info(r.msg);
                    this.props.navigation.push('ChangePark');
                }
            });
        };
        const cancel = () => {
            this.props.initParkOrder();
            this.props.navigation.replace('ParkInfo', {parkingid: this.state.parkingid});
        };

        return (
            <View style={{width: '100%', height: '100%'}}>
                <View style={{width: '100%', height: '35%', flexDirection: 'column'}}>
                    <ImageBackground
                        style={{height: 180, resizeMode: 'repeat', justifyContent: 'center'}}
                        source={require('~/assets/public/juxing.png')}
                    />
                    <View style={{margin: 10, width: '90%', marginLeft: '5%', marginRight: '5%', marginTop: -90}}>
                        <Parkpublics parkinginfo={this.props.parkorder.parkinginfo} />
                    </View>
                    <View
                        style={{
                            backgroundColor: 'white',
                            width: '90%',
                            marginLeft: '5%',
                            marginRight: '5%',
                            paddingBottom: 20,
                            marginTop: 10,
                            padding: 10,
                            borderRadius: 5,
                        }}>
                        <Flex justify={'between'}>
                            <Text style={{color: 'gray'}}>付款方式:</Text>
                            <Text style={{color: '#333333', fontWeight: 'bold'}}>
                                {this.props.parkorder.payfull == 1 && '全款'}
                                {this.props.parkorder.payloan == 1 && '0首付'}
                            </Text>
                        </Flex>
                        {this.props.parkorder.packagestate == 1 && (
                            <Flex justify={'between'} style={{marginTop: 20}}>
                                <Text style={{color: 'gray'}}>套餐:</Text>
                                <Text style={{color: '#333333', fontWeight: 'bold'}}>{this.props.parkorder.packagename}</Text>
                            </Flex>
                        )}
                        {this.props.parkorder.coinstate == 1 && (
                            <Flex justify={'between'} style={{marginTop: 20}}>
                                <Text style={{color: 'gray'}}>返现金:</Text>
                                <Text style={{color: '#333333', fontWeight: 'bold'}}>{this.state.parkingplanitem.CoinValue}元</Text>
                            </Flex>
                        )}
                        {this.props.parkorder.carstate == 1 && (
                            <Flex align={'start'} justify={'between'} style={{marginTop: 20}}>
                                <Text style={{color: 'gray'}}>得汽车:</Text>
                                <Flex direction={'column'} justify={'end'} align={'end'} style={{width: '50%'}}>
                                    <Text style={{color: '#333333', fontWeight: 'bold'}}>
                                        {this.state.parkingplanitem.CarPrice}的{this.state.parkingplancar.CarName}
                                    </Text>
                                    <Text style={{fontSize: 12}}>
                                        每<Text style={{color: '#ec4f46'}}>{this.state.parkingplancar.CarGroup}</Text>位业主送一辆
                                    </Text>
                                </Flex>
                            </Flex>
                        )}
                    </View>
                </View>
                {this.state.parkstate === '可售' ? (
                    <Flex style={{width: '100%', height: '65%'}} align={'end'} justify={'end'}>
                        <Flex style={{width: '50%', height: 40}} onPress={cancel}>
                            <Text style={{backgroundColor: 'white', width: '100%', height: 40, fontsize: 16, textAlign: 'center', paddingTop: 12}}>
                                取消
                            </Text>
                        </Flex>
                        <Flex style={{width: '50%', height: 40}} onPress={onpress}>
                            <Text
                                style={{
                                    backgroundColor: '#ec4f46',
                                    paddingTop: 12,
                                    color: 'white',
                                    width: '100%',
                                    height: 40,
                                    fontsize: 16,
                                    textAlign: 'center',
                                }}>
                                确认
                            </Text>
                        </Flex>
                    </Flex>
                ) : (
                    <Flex style={{width: '100%', height: '65%'}} align={'end'} justify={'end'}>
                        <Flex style={{width: '100%', height: 40}} onPress={cancel}>
                            <Text style={{backgroundColor: '#d3d3d3', width: '100%', height: 40, fontsize: 16, textAlign: 'center', paddingTop: 12}}>
                                车位已售，返回选购其它车位
                            </Text>
                        </Flex>
                    </Flex>
                )}
            </View>
        );
    }
}

export default connect(mapGetter, mapSetter)(Confirm);
const styles = StyleSheet.create({});
